<template>
	<view>
		<view class="name">{{details.name}}</view>
		<image :src="details.img" mode="aspectFill" style="width: 100%; height: 190px;"></image>
		<view class="distance">你当前距离{{details.name}}有{{dis.toFixed(2)}}km</view>
	</view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from 'vue';
import { CONFIG } from "../../utils/config";
import { getMapDistance } from "../../utils/tools.js";
import { userStore } from "../../store/userStore.js";

const store = userStore();
const details = ref({});
const dis = ref(0);

onLoad((data) => {
	getDetails(data.id);
});

async function getDetails(id) {
	let res = await uni.$get(CONFIG.leanCloud_url + "/1.1/classes/senicItem", {
		where: { objectId: id }
	});
	if (res.statusCode == 200) {
		details.value = res.data;
		dis.value = getMapDistance(details.value.lat, details.value.lon, store.currentPos.latitude, store.currentPos.longitude);
	}
}
</script>

<style>
.name {
  text-align: center;
  font-size: 24px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-top: 20px; /* 上边距 */
  margin-bottom: 10px; /* 下边距 */
}

image {
  border-radius: 10px; /* 图片圆角 */
}

.distance {
  text-align: center;
  font-size: 18px; /* 字体大小 */
  color: #666; /* 字体颜色 */
  margin-top: 10px; /* 上边距 */
}
</style>